<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 按钮组 -->
      <div class="yl-btn-group">
        <YlButton uiType="plain" icon="el-icon-circle-plus-outline" @click="initAdd">新增</YlButton>
        <YlButton uiType="plain" btnType="success" icon="el-icon-circle-plus-outline" @click="handleOpenMenu">批量开启</YlButton>
        <YlButton uiType="plain" btnType="danger" icon="el-icon-circle-plus-outline" @click="handleCloseMenu">批量关闭</YlButton>
      </div>
      <!-- 树级菜单 -->
      <div v-loading="loading">
        <ylTree
          :treeConfig="treeConfig"
          @open-node="openSingleNode"
          @init-state="getInitState"
          @check-node="getCheckNode"
        />
        <el-dialog :title="formConfig.isFix ? '修改菜单' : '新增菜单'" width="1184px" :visible.sync="dialogFormVisible" class="yl-dialog">
          <YlForm
            ref="ylform"
            :formConfig="formConfig"
            @close-dialog="getCloseDialog"
            @init-state="getInitState"
          />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAllMenuList,
  arrangeDataList
} from '@/mock/menu'
export default {
  data () {
    return {
      loading: false,
      // 新增 修改弹窗
      dialogFormVisible: false,
      // tree配置
      treeConfig: {
        hasMenuBtn: true,
        hasMenuInfo: true,
        hasCheckBox: true,
        methodMenuApi: this.$ylapi.handleMenuState,
        deleteApi: this.$ylapi.deleteMenu,
        node_key: 'nns_id',
        treeData: []
      },
      // form配置
      formConfig: {
        isFix: false,
        changeId: '',
        btnMethod: ['submit', 'cancel'],
        formData: {
          menu_name: '',
          menu_state: '1',
          menu_parent: [],
          menu_url: '',
          default_img: '',
          focus_img: ''
        },
        editRules: {
          menu_name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ],
          menu_state: [
            { required: true, message: '请选择菜单状态', trigger: 'change' }
          ],
          menu_parent: [
            { required: true, message: '请选择父级菜单', trigger: 'change' }
          ]
        },
        columns: [
          {
            type: 'input',
            label: '菜单名称',
            prop: 'menu_name'
          },
          {
            type: 'select',
            label: '菜单状态',
            prop: 'menu_state',
            options: [
              { value: '1', label: '开启' },
              { value: '0', label: '关闭' }
            ]
          },
          {
            type: 'cascader',
            label: '父级菜单',
            prop: 'menu_parent',
            config: {
              value: 'nns_id',
              label: 'nns_menu_name',
              checkStrictly: true
            },
            options: []
          },
          {
            type: 'input',
            label: '菜单url',
            prop: 'menu_url'
          },
          {
            type: 'input',
            label: '默认图标',
            prop: 'default_img'
          },
          {
            type: 'input',
            label: '焦点图标',
            prop: 'focus_img'
          }
        ],
        addApi: this.$ylapi.addNewMenu,
        changeApi: this.$ylapi.changeMenuInfo
      },
      checkNodes: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 新增初始化
    initAdd () {
      this.formConfig.isFix = false
      this.dialogFormVisible = true
      this.formConfig.formData = this.initForm(this.formConfig.formData, ['menu_state'])
    },
    // 初始化数据
    initData () {
      this.loading = true
      this.dialogFormVisible = false
      this.getTreeData()
      this.showMenu()
    },
    // 获取树级数据
    async getTreeData () {
      let obj = {
        parent_menu_id: 0,
        with_pris: true,
        with_all: true
      }
      this.treeConfig.treeData = getAllMenuList(
        await this.$ylapi.getMenuChild(obj)
      )
      this.loading = false
    },

    // 获取所有菜单
    async showMenu (id) {
      let obj = {
        parent_menu_id: 0,
        with_pris: false,
        with_all: true
      }
      this.formConfig.columns[2].options = getAllMenuList(
        this.arrangeMenuList(
          await this.$ylapi.getMenuChild(obj)
        )
      )
    },
    // 递归清除children为空的项
    arrangeMenuList (arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children.length === 0) {
          arr[i].children = undefined
        } else {
          this.arrangeMenuList(arr[i].children)
        }
      }
      return arr
    },
    // 修改菜单功能
    async openSingleNode (id) {
      this.dialogFormVisible = true
      this.formConfig.isFix = true
      this.formConfig.btnMethod = ['save', 'cancel']
      let data = await this.$ylapi.getSingleMenuInfo(id)
      let cascaderList = data.nns_menu_relation
      cascaderList.unshift('0')
      this.formConfig.changeId = id
      this.formConfig.formData.menu_name = data.nns_menu_name
      this.formConfig.formData.menu_state = data.nns_menu_state.toString()
      this.formConfig.formData.menu_parent = cascaderList
      this.formConfig.formData.menu_url = data.nns_menu_url
      this.formConfig.formData.default_img = data.nns_default_img
      this.formConfig.formData.focus_img = data.nns_focus_img
    },

    // 开启菜单功能
    async handleOpenMenu () {
      let nodes = arrangeDataList(this.checkNodes, true)
      if (nodes) {
        // eslint-disable-next-line no-unused-expressions
        await this.$modal.confirm(this, {
          api: this.$ylapi.handleMenuState,
          warning: '是否确认开启菜单?',
          obj: {
            menu_ids: nodes,
            op: 1
          }
        })
          ? this.initData()
          : ''
      } else {
        this.$modal.warning(this, '请选择要开启的菜单')
        return false
      }
    },

    // 关闭菜单
    async handleCloseMenu () {
      let nodes = arrangeDataList(this.checkNodes, true)
      if (nodes) {
        // eslint-disable-next-line no-unused-expressions
        await this.$modal.confirm(this, {
          api: this.$ylapi.handleMenuState,
          warning: '是否确认关闭菜单?',
          obj: {
            menu_ids: nodes,
            op: 0
          }
        })
          ? this.initData()
          : ''
      } else {
        this.$modal.warning(this, '请选择要关闭的菜单')
        return false
      }
    },

    // 初始化树
    getInitState (val) {
      if (val) {
        this.initData()
      }
    },

    // 获取选中的节点
    getCheckNode (val) {
      this.checkNodes = val
    },

    // 关闭弹窗
    getCloseDialog (val) { this.dialogFormVisible = val }
  }
}
</script>
